<template>
  <div>
    <el-row>
      <el-col>
        <div style="float:right; margin-bottom:10px">
          <el-button size="mini" @click="selectStock">选择备件</el-button>
        </div>
      </el-col>
      <el-col>
        <el-table
          :loading="loading"
          :data="insideTableData"
        >
          <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
            <template slot-scope="scope">
              <column-render :render="column.render" :row="scope.row" :column="column" />
            </template>
          </el-table-column>
          <el-table-column v-if="!forSelection" label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <el-button type="text" title="删除" size="mini" icon="el-icon-delete" @click="remove(row)" />
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <div style="float:right; margin-top:10px">
          <el-button size="mini" @click="cancal()">取消</el-button>
          <el-button size="mini" @click="save()">完成</el-button>
        </div>
      </el-col>
    </el-row>
    <SelectDialog title="选择备件" :append-to-body="true" :show="stockSelDialogFormVisible" @on-ok="selectStockOk" @on-cancel="selectStockCancel">
      <stock ref="selectStocks" :select-rows="insideTableData" status="new" :for-selection="true" :multiple-selected="true" />
    </SelectDialog>
  </div>
</template>

<script>
import databind from '@neu/biz-core/mixins/databind'
import stock from '@neu/dcam-ui/views/stock/tables'
import {
  listStockSelect,
  stockSave
} from '@neu/dcam-ui/api/spareconsume'
import SelectDialog from '@neu/biz-core/components/SelectDialog'
export default {
  components: {
    SelectDialog,
    stock
  },
  mixins: [databind],
  props: {
    taskId: {
      required: false,
      type: String,
      default: 'NULL'
    },
    workOrderNum: {
      required: false,
      type: String,
      default: ''
    }
  },
  data() {
    return {
      r: listStockSelect,
      tableHeight: 100,
      /** 是否显示维保负责人的数据 */
      stockSelDialogFormVisible: false,
      insideTableData: [],
      insideColumns: [
        {
          title: '货品编号',
          key: 'storckNumber'
        }, {
          title: '备品备件分类',
          key: 'spareTypeName'
        },
        {
          title: '规格型号',
          key: 'specification'
        },
        {
          title: 'SN',
          key: 'sn'
        },
        {
          title: '存放库房',
          key: 'storehouseName'
        },
        {
          title: '单价',
          key: 'unitPrice'
        },
        {
          title: '货品来源',
          key: 'source',
          render: (h, params) => {
            let sourceDesc = ''
            if (params.row.source === 'new') {
              sourceDesc = '合同采购'
            } else if (params.row.source === 'back') {
              sourceDesc = '退库利旧'
            }
            return h('span', [
              h('el-tag', sourceDesc)
            ])
          }
        }
      ]
    }
  },
  created() {
    const parameter = {
      's_workOrderNum': this.workOrderNum,
      's_taskId': this.taskId
    }
    this.filter(parameter)
  },
  methods: {
    selectStock() {
      this.stockSelDialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.selectStocks.init(this.insideTableData)
      })
    },
    selectStockOk(value) {
      const stocks = this.$refs.selectStocks.selections
      this.insideTableData = []
      stocks.forEach((data, index) => {
        const spareconsumeStock = {}
        spareconsumeStock.stock = data
        spareconsumeStock.storckNumber = data.storckNumber
        spareconsumeStock.spareTypeName = data.spareTypeName
        spareconsumeStock.specification = data.specification
        spareconsumeStock.sn = data.sn
        spareconsumeStock.storehouseName = data.storehouseName
        spareconsumeStock.unitPrice = data.unitPrice
        spareconsumeStock.source = data.source
        spareconsumeStock.stockId = data.id
        spareconsumeStock.workOrderNum = this.workOrderNum
        spareconsumeStock.taskId = this.taskId
        this.insideTableData.push(spareconsumeStock)
      })
      this.stockSelDialogFormVisible = false
    },
    selectStockCancel() {
      this.stockSelDialogFormVisible = false
    },
    remove(row) {
      if (this.insideTableData) {
        let i = -1
        this.insideTableData.forEach((data, index) => {
          if (data.stockId === row.stockId) {
            i = index
          }
        })
        this.insideTableData.splice(i, 1)
      }
      this.insideTableData.remove(row)
    },
    cancal() {
      this.$emit('cancelNewOrderForm', 'refresh')
    },
    save() {
      if (this.insideTableData.length <= 0) {
        this.$message({
          showClose: true,
          message: '请选择备件！',
          type: 'error'
        })
        return false
      }
      stockSave(this.insideTableData).then(res => {
        if (res.status === 'success') {
          this.$emit('cancelNewOrderForm', 'refresh')
        }
      })
    }
  }
}
</script>
